<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>首页—频道编辑 | Megasu的笔记</title>
    <meta name="generator" content="VuePress 1.5.4">
    <link rel="icon" href="/heima2020/favicon.ico">
    <meta name="description" content="Megasu的笔记整理">
    <meta name="author" content="Megasu">
    <meta name="Keywords" content="学习网站,前端,分享">
    <link rel="preload" href="/heima2020/assets/css/0.styles.aa663799.css" as="style"><link rel="preload" href="/heima2020/assets/js/app.e2adc9d2.js" as="script"><link rel="preload" href="/heima2020/assets/js/2.7389c9d3.js" as="script"><link rel="preload" href="/heima2020/assets/js/17.79d3becb.js" as="script"><link rel="prefetch" href="/heima2020/assets/js/10.8b750e5f.js"><link rel="prefetch" href="/heima2020/assets/js/11.9224f975.js"><link rel="prefetch" href="/heima2020/assets/js/12.3ea117b6.js"><link rel="prefetch" href="/heima2020/assets/js/13.7524b74f.js"><link rel="prefetch" href="/heima2020/assets/js/14.cee0fcf8.js"><link rel="prefetch" href="/heima2020/assets/js/15.7a4a27f7.js"><link rel="prefetch" href="/heima2020/assets/js/16.947d882b.js"><link rel="prefetch" href="/heima2020/assets/js/18.48208e3a.js"><link rel="prefetch" href="/heima2020/assets/js/19.3d0c49ef.js"><link rel="prefetch" href="/heima2020/assets/js/20.1f6114c8.js"><link rel="prefetch" href="/heima2020/assets/js/21.85e67b4a.js"><link rel="prefetch" href="/heima2020/assets/js/22.ce482f4d.js"><link rel="prefetch" href="/heima2020/assets/js/23.a150bd35.js"><link rel="prefetch" href="/heima2020/assets/js/24.8cd80d5d.js"><link rel="prefetch" href="/heima2020/assets/js/25.0001c7c1.js"><link rel="prefetch" href="/heima2020/assets/js/26.aa4d65a5.js"><link rel="prefetch" href="/heima2020/assets/js/27.baffff1d.js"><link rel="prefetch" href="/heima2020/assets/js/28.20430dcf.js"><link rel="prefetch" href="/heima2020/assets/js/29.7bbc3c04.js"><link rel="prefetch" href="/heima2020/assets/js/3.0076a912.js"><link rel="prefetch" href="/heima2020/assets/js/30.5f74696f.js"><link rel="prefetch" href="/heima2020/assets/js/31.a0bf56d6.js"><link rel="prefetch" href="/heima2020/assets/js/32.dd5a93dd.js"><link rel="prefetch" href="/heima2020/assets/js/33.92de7335.js"><link rel="prefetch" href="/heima2020/assets/js/34.bf468ed6.js"><link rel="prefetch" href="/heima2020/assets/js/35.28502be1.js"><link rel="prefetch" href="/heima2020/assets/js/36.3622a14c.js"><link rel="prefetch" href="/heima2020/assets/js/37.626e17d3.js"><link rel="prefetch" href="/heima2020/assets/js/38.860020b8.js"><link rel="prefetch" href="/heima2020/assets/js/39.c092c283.js"><link rel="prefetch" href="/heima2020/assets/js/4.586af112.js"><link rel="prefetch" href="/heima2020/assets/js/40.a6ba2743.js"><link rel="prefetch" href="/heima2020/assets/js/41.43d70bcd.js"><link rel="prefetch" href="/heima2020/assets/js/42.6486a709.js"><link rel="prefetch" href="/heima2020/assets/js/43.670b256a.js"><link rel="prefetch" href="/heima2020/assets/js/44.eb371480.js"><link rel="prefetch" href="/heima2020/assets/js/45.5b45f11e.js"><link rel="prefetch" href="/heima2020/assets/js/46.bc59be94.js"><link rel="prefetch" href="/heima2020/assets/js/47.ec36fca9.js"><link rel="prefetch" href="/heima2020/assets/js/48.51e80f8f.js"><link rel="prefetch" href="/heima2020/assets/js/5.6eb7e243.js"><link rel="prefetch" href="/heima2020/assets/js/6.1b7d5a6d.js"><link rel="prefetch" href="/heima2020/assets/js/7.f611fe3c.js"><link rel="prefetch" href="/heima2020/assets/js/8.c14cc922.js"><link rel="prefetch" href="/heima2020/assets/js/9.cd5538bb.js">
    <link rel="stylesheet" href="/heima2020/assets/css/0.styles.aa663799.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/heima2020/" class="home-link router-link-active"><!----> <span class="site-name">Megasu的笔记</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/heima2020/" class="nav-link">
  首页
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/heima2020/" class="nav-link">
  首页
</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><a href="/heima2020/node/day01" class="sidebar-heading clickable open"><span>Node</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/heima2020/node/day01.html" class="sidebar-link">Node 第 1 天</a></li><li><a href="/heima2020/node/day02.html" class="sidebar-link">Node 第 2 天</a></li><li><a href="/heima2020/node/day03.html" class="sidebar-link">Node 第 3 天</a></li><li><a href="/heima2020/node/day04.html" class="sidebar-link">Node 第 4 天</a></li><li><a href="/heima2020/node/day05.html" class="sidebar-link">Node 第 5 天</a></li><li><a href="/heima2020/node/day06.html" class="sidebar-link">Node 第 6 天</a></li><li><a href="/heima2020/node/day07.html" class="sidebar-link">Node 第 7 天</a></li><li><a href="/heima2020/node/day08.html" class="sidebar-link">Node 第 8 天</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="首页-频道编辑"><a href="#首页-频道编辑" class="header-anchor">#</a> 首页—频道编辑</h2> <img src="/heima2020/assets/img/001 - 频道编辑.2ba60931.png" style="zoom:66%;"> <h3 id="_1-准备工作"><a href="#_1-准备工作" class="header-anchor">#</a> 1. 准备工作</h3> <h4 id="_1-1-处理页面弹出层"><a href="#_1-1-处理页面弹出层" class="header-anchor">#</a> 1.1  处理页面弹出层</h4> <blockquote><p><code>Vant</code> 中内置了 <a href="https://youzan.github.io/vant/#/zh-CN/popup" target="_blank" rel="noopener noreferrer">Popup 弹出层<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 组件</p></blockquote> <ol><li>分析  <a href="https://youzan.github.io/vant/#/zh-CN/popup" target="_blank" rel="noopener noreferrer">Popup 弹出层<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 组件，复制关闭图标到页面中</li></ol> <ul><li>在首页模板中的频道列表后面添加弹出层组件</li></ul> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token comment">&lt;!-- 频道编辑弹出层 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-popup</span>
  <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>isChannelEditShow<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">closeable</span>
  <span class="token attr-name">close-icon-position</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top-left<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">position</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bottom<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">:</span><span class="token style-attr language-css"><span class="token attr-name"><span class="token attr-name">style</span></span><span class="token punctuation">=&quot;</span><span class="token attr-value"><span class="token punctuation">{</span> <span class="token property">height</span><span class="token punctuation">:</span> <span class="token string">'100%'</span> <span class="token punctuation">}</span></span><span class="token punctuation">&quot;</span></span>
<span class="token punctuation">/&gt;</span></span>
</code></pre></div><ol start="2"><li><p>在 <code>data</code>中添加一个数据用来控制弹层的显示和隐藏</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">{</span>
    <span class="token operator">...</span>
    isChannelEditShow<span class="token operator">:</span> <span class="token boolean">false</span> <span class="token comment">// 控制编辑频道弹出层的显示状态</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>给汉堡菜单添加点击事件，让 <a href="https://youzan.github.io/vant/#/zh-CN/popup" target="_blank" rel="noopener noreferrer">Popup 弹出层<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 组件显示</p></li></ol> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>nav-right<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>hamburger-btn<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>isChannelEditShow = true<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>toutiao toutiao-gengduo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><ol start="4"><li>测试查看结果</li></ol> <h4 id="_1-2-创建频道编辑组件"><a href="#_1-2-创建频道编辑组件" class="header-anchor">#</a> 1.2  创建频道编辑组件</h4> <ol><li><p>创建 <code>views/home/components/channel-edit.vue</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>channel-edit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>频道编辑<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">'ChannelEdit'</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>less<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>

</code></pre></div></li> <li><p>在首页中加载注册频道编辑组件</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> ChannelEdit <span class="token keyword">from</span> <span class="token string">'./components/channel-edit'</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token operator">...</span>
  components<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token operator">...</span>
    ChannelEdit
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>在弹出层中使用频道编辑组件</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token comment">&lt;!-- 频道编辑弹出层 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-popup</span>
  <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>isChannelEditShow<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">closeable</span>
  <span class="token attr-name">close-icon-position</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top-left<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">position</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bottom<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">:</span><span class="token style-attr language-css"><span class="token attr-name"><span class="token attr-name">style</span></span><span class="token punctuation">=&quot;</span><span class="token attr-value"><span class="token punctuation">{</span> <span class="token property">height</span><span class="token punctuation">:</span> <span class="token string">'100%'</span> <span class="token punctuation">}</span></span><span class="token punctuation">&quot;</span></span>
<span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>channel-edit</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-popup</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li></ol> <h4 id="_1-3-频道编辑组件页面布局"><a href="#_1-3-频道编辑组件页面布局" class="header-anchor">#</a> 1.3 频道编辑组件页面布局</h4> <ol><li>对频道编辑组件页面布局</li></ol> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>channel-edit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name">:border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>title<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>我的频道<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mini<span class="token punctuation">&quot;</span></span> <span class="token attr-name">round</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">plain</span><span class="token punctuation">&gt;</span></span>编辑<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-button</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-cell</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-grid</span> <span class="token attr-name">:gutter</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-grid-item</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>value in 8<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>value<span class="token punctuation">&quot;</span></span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>文字<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-grid</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name">:border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>title<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>频道推荐<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-cell</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-grid</span> <span class="token attr-name">:gutter</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-grid-item</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>value in 8<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>value<span class="token punctuation">&quot;</span></span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>文字<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-grid</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">'ChannelEdit'</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>less<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>

</code></pre></div><h4 id="_1-4-对频道编辑页面样式进行调整"><a href="#_1-4-对频道编辑页面样式进行调整" class="header-anchor">#</a> 1.4 对频道编辑页面样式进行调整</h4> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>channel-edit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name">:border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>title<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>title-text<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>我的频道<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>edit-btn<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mini<span class="token punctuation">&quot;</span></span> <span class="token attr-name">round</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">plain</span><span class="token punctuation">&gt;</span></span>编辑<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-button</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-cell</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-grid</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>my-grid<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:gutter</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-grid-item</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>clear<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>grid-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>value in 8<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>value<span class="token punctuation">&quot;</span></span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>文字<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-grid</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-cell</span> <span class="token attr-name">:border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>false<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>title<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>title-text<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>频道推荐<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-cell</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-grid</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>recomment-grid<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:gutter</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-grid-item</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>plus<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>grid-item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>value in 8<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>value<span class="token punctuation">&quot;</span></span> <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>文字文字字<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-grid</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">'ChannelEdit'</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>less<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.channel-edit</span> <span class="token punctuation">{</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 85px 0<span class="token selector">;

  .title-text</span> <span class="token punctuation">{</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> 32px<span class="token punctuation">;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> #333<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token selector">.edit-btn</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 104px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 48px<span class="token punctuation">;</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> 26px<span class="token punctuation">;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> #f85959<span class="token punctuation">;</span>
    <span class="token property">border</span><span class="token punctuation">:</span> 1px solid #f85959<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token selector">/deep/ .grid-item</span> <span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 160px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 86px<span class="token selector">;
    .van-grid-item__content</span> <span class="token punctuation">{</span>
      <span class="token property">white-space</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span>
      <span class="token property">background-color</span><span class="token punctuation">:</span> #f4f5f6<span class="token selector">;

      .van-grid-item__text</span> <span class="token punctuation">{</span>
        <span class="token property">font-size</span><span class="token punctuation">:</span> 22px<span class="token punctuation">;</span>
        <span class="token property">color</span><span class="token punctuation">:</span> #222<span class="token punctuation">;</span>
        <span class="token property">margin-top</span><span class="token punctuation">:</span> 4px <span class="token important">!important</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>

  <span class="token selector">/deep/ .my-grid</span> <span class="token punctuation">{</span>
    <span class="token selector">.grid-item</span> <span class="token punctuation">{</span>
      <span class="token selector">.van-icon-clear</span> <span class="token punctuation">{</span>
        <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
        <span class="token property">right</span><span class="token punctuation">:</span> -10px<span class="token punctuation">;</span>
        <span class="token property">top</span><span class="token punctuation">:</span> -10px<span class="token punctuation">;</span>
        <span class="token property">font-size</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
        <span class="token property">color</span><span class="token punctuation">:</span> #cacaca<span class="token punctuation">;</span>
        <span class="token property">z-index</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>

  <span class="token selector">/deep/ .recomment-grid</span> <span class="token punctuation">{</span>
    <span class="token selector">.grid-item</span> <span class="token punctuation">{</span>
      <span class="token property">width</span><span class="token punctuation">:</span> 160px<span class="token punctuation">;</span>
      <span class="token property">height</span><span class="token punctuation">:</span> 86px<span class="token selector">;
      .van-grid-item__content</span> <span class="token punctuation">{</span>
        <span class="token property">flex-direction</span><span class="token punctuation">:</span> row<span class="token selector">;

        .van-icon-plus</span> <span class="token punctuation">{</span>
          <span class="token property">font-size</span><span class="token punctuation">:</span> 22px<span class="token punctuation">;</span>
          <span class="token property">line-height</span><span class="token punctuation">:</span> 22px<span class="token punctuation">;</span>
          <span class="token property">margin-right</span><span class="token punctuation">:</span> 6px<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>

</code></pre></div><hr> <h3 id="_2-展示我的频道"><a href="#_2-展示我的频道" class="header-anchor">#</a> 2. 展示我的频道</h3> <ol><li><p>在父组件中把 <code>channels</code> 传递给频道编辑组件</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token comment">&lt;!-- 频道编辑弹出层 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-popup</span>
  <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>isChannelEditShow<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">closeable</span>
  <span class="token attr-name">close-icon-position</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>top-left<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">position</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bottom<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">:</span><span class="token style-attr language-css"><span class="token attr-name"><span class="token attr-name">style</span></span><span class="token punctuation">=&quot;</span><span class="token attr-value"><span class="token punctuation">{</span> <span class="token property">height</span><span class="token punctuation">:</span> <span class="token string">'100%'</span> <span class="token punctuation">}</span></span><span class="token punctuation">&quot;</span></span>
<span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>channel-edit</span> <span class="token attr-name">:user-channels</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>channels<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-popup</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>在频道编辑组件中声明接收父组件的 <code>userChannels</code> 频道列表数据并遍历展示</p> <div class="language-js extra-class"><pre class="language-js"><code>props<span class="token operator">:</span> <span class="token punctuation">{</span>
  userChannels<span class="token operator">:</span> <span class="token punctuation">{</span>
    type<span class="token operator">:</span> Array<span class="token punctuation">,</span>
    required<span class="token operator">:</span> <span class="token boolean">true</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-grid</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>my-grid<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:gutter</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-grid-item</span>
    <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>clear<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>grid-item<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(channel, index) in userChannels<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">:text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>channel.name<span class="token punctuation">&quot;</span></span>
  <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-grid</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>刷新页面，查看渲染后的效果</p></li></ol> <hr> <h3 id="_3-让当前激活频道高亮显示"><a href="#_3-让当前激活频道高亮显示" class="header-anchor">#</a> 3. 让当前激活频道高亮显示</h3> <ol><li><p>将首页组件中的 <code>active</code> 传递到频道编辑组件中</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>channel-edit</span> <span class="token attr-name">:my-channels</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>channels<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:active-index</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>active<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
</code></pre></div></li> <li><p>在频道编辑组件中声明 props 接收</p> <div class="language-js extra-class"><pre class="language-js"><code>activeIndex<span class="token operator">:</span> <span class="token punctuation">{</span>
  type<span class="token operator">:</span> Number<span class="token punctuation">,</span>
  required<span class="token operator">:</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>通过插槽，渲染我的频道内容，并添加 <code>text</code> 类名，设置样式</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-grid-item</span>
  <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>clear<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>grid-item<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(channel, index) in userChannels<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span>
<span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{ channel.name }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-grid-item</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-less extra-class"><pre class="language-less"><code><span class="token selector">.van-grid-item__text, .text</span> <span class="token punctuation">{</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 22px<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #222<span class="token punctuation">;</span>
  <span class="token property">margin-top</span><span class="token punctuation">:</span> 4px <span class="token important">!important</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>判断遍历项，如果 <code>遍历项索引 === active</code>，则给这个频道项设置高亮样式</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-grid-item</span>
  <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>clear<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>grid-item<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(channel, index) in userChannels<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span>
<span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ active: index === activeIndex }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{ channel.name }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-grid-item</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-less extra-class"><pre class="language-less"><code><span class="token selector">/deep/ .grid-item</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 160px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 86px<span class="token punctuation">;</span>
  <span class="token selector">.van-grid-item__content</span> <span class="token punctuation">{</span>
    <span class="token property">white-space</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> #f4f5f6<span class="token punctuation">;</span>

    <span class="token selector">.van-grid-item__text, .text</span> <span class="token punctuation">{</span>
      <span class="token property">font-size</span><span class="token punctuation">:</span> 22px<span class="token punctuation">;</span>
      <span class="token property">color</span><span class="token punctuation">:</span> #222<span class="token punctuation">;</span>
      <span class="token property">margin-top</span><span class="token punctuation">:</span> 4px <span class="token important">!important</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector">.active</span> <span class="token punctuation">{</span>
      <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>刷新页面，查看渲染后的效果</p></li></ol> <h3 id="_4-展示推荐频道列表"><a href="#_4-展示推荐频道列表" class="header-anchor">#</a> 4. 展示推荐频道列表</h3> <img src="/heima2020/assets/img/002 - 展示推荐频道列表.b04e9036.png" style="zoom:57%;"> <h4 id="_4-1-实现思路"><a href="#_4-1-实现思路" class="header-anchor">#</a> 4.1 实现思路</h4> <p>没有用来获取推荐频道的数据接口，但是我们有获取所有频道列表的数据接口。</p> <p>所以：<code>所有频道列表 - 我的频道 = 剩余推荐的频道</code>。</p> <p>实现过程所以一共分为两大步：</p> <ul><li>获取所有频道</li> <li>基于所有频道和我的频道计算获取剩余的推荐频道</li></ul> <h4 id="_4-2-获取所有频道"><a href="#_4-2-获取所有频道" class="header-anchor">#</a> 4.2 获取所有频道</h4> <ol><li><p>创建 <code>src\api\channel.js</code> 文件，并封装数据接口</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">/**
 * 推荐频道列表接口数据封装
 */</span>

<span class="token keyword">import</span> request <span class="token keyword">from</span> <span class="token string">'@/utils/request.js'</span>

<span class="token comment">// 获取所有频道</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">getAllChannels</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    method<span class="token operator">:</span> <span class="token string">'GET'</span><span class="token punctuation">,</span>
    url<span class="token operator">:</span> <span class="token string">'/app/v1_0/channels'</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

</code></pre></div></li> <li><p>在编辑频道组件中导入封装的 <code>getAllChannels</code> 方法</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> getAllChannels <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/api/channel.js'</span>
</code></pre></div></li> <li><p>在编辑频道组件中请求获取所有频道数据</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">'ChannelEdit'</span><span class="token punctuation">,</span>
  props<span class="token operator">:</span> <span class="token punctuation">{</span>
   <span class="token comment">// 略 ...</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      allChannels<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token comment">// 所有频道</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">created</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">loadAllChannels</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  methods<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token keyword">async</span> <span class="token function">loadAllChannels</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">try</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> <span class="token punctuation">{</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">getAllChannels</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>allChannels <span class="token operator">=</span> data<span class="token punctuation">.</span>data<span class="token punctuation">.</span>channels
      <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$toast</span><span class="token punctuation">(</span><span class="token string">'获取所有频道数据失败'</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre></div></li> <li><p>在 <code>Vue-Devtools</code> 调试工具中测试是否有拿到数据</p></li></ol> <h4 id="_4-3-处理展示推荐频道"><a href="#_4-3-处理展示推荐频道" class="header-anchor">#</a> 4.3 处理展示推荐频道</h4> <blockquote><p>处理展示推荐频道思路：<code>所有频道 - 用户频道 = 推荐频道</code></p></blockquote> <ol><li><p>封装计算属性筛选数据</p> <ul><li>遍历所有频道</li> <li>对每一个频道都判断：该频道是否属于我的频道</li> <li>如果不属于我的频道，则收集起来</li> <li>直到遍历结束，剩下来就是那些剩余的推荐频道</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>computed<span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token function">recommendChannele</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> channels <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>allChannels<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">channel</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token comment">// 使用 find 遍历数组，找到满足条件的元素项</span>
      <span class="token keyword">const</span> ret <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>userChannels<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token parameter">userChannels</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> userChannels<span class="token punctuation">.</span>id <span class="token operator">===</span> channel<span class="token punctuation">.</span>id
      <span class="token punctuation">}</span><span class="token punctuation">)</span>

      <span class="token comment">// 如果我的频道中不包括该频道项，则收集到推荐频道中</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>ret<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        channels<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>channel<span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>使用数据渲染到页面中</p></li></ol> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-grid</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>recomment-grid<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:gutter</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-grid-item</span>
    <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>plus<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>grid-item<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>channel in recommendChannele<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>channel.id<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">:text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>channel.name<span class="token punctuation">&quot;</span></span>
  <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-grid</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><ol start="3"><li><p>封装计算属性的另一种方式，使用 <code>filter</code> 方法</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">recommendChannele</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 数组的 filter 方法：遍历数组，把符合条件的元素存储到新数组中</span>
  <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>allChannels<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">channel</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">// const channel = []</span>
    <span class="token comment">// 数组的 find 方法：遍历数组，把符合条件的第一个元素返回</span>
    <span class="token keyword">return</span> <span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>myChannels<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token parameter">myChannel</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> myChannel<span class="token punctuation">.</span>id <span class="token operator">===</span> channel<span class="token punctuation">.</span>id
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>刷新页面，查看数据是否渲染成功</p></li></ol> <hr> <h3 id="_5-添加频道"><a href="#_5-添加频道" class="header-anchor">#</a> 5. 添加频道</h3> <img src="/heima2020/assets/img/003 - 频道管理-添加频道.0289bd62.gif" style="zoom:50%;"> <h4 id="_5-1-实现思路"><a href="#_5-1-实现思路" class="header-anchor">#</a> 5.1 实现思路</h4> <p>思路：</p> <ul><li>给推荐频道列表中每一项注册点击事件</li> <li>获取点击的频道项</li> <li>将频道项添加到我的频道中</li> <li><s>将当前点击的频道项从推荐频道中移除</s> <ul><li>不需要删除，因为我们获取数据使用的是计算属性，当我频道发生改变，计算属性重新求值了</li></ul></li></ul> <h4 id="_5-2-实现添加频道功能"><a href="#_5-2-实现添加频道功能" class="header-anchor">#</a> 5.2 实现添加频道功能</h4> <ol><li><p>给推荐频道中的频道注册点击事件</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-grid</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>recomment-grid<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:gutter</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>10<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-grid-item</span>
    <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>plus<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>grid-item<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>channel in recommendChannele<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>channel.id<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">:text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>channel.name<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onAddChannel(channel)<span class="token punctuation">&quot;</span></span>
  <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-grid</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>在添加频道事件处理函数中</p></li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 添加频道</span>
<span class="token function">onAddChannel</span> <span class="token punctuation">(</span><span class="token parameter">channel</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>myChannels<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>channel<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><ol start="3"><li><p>点击频道，查看是否能够添加成功</p></li> <li><p>思考 ？</p></li></ol> <blockquote><p>点击的那个推荐频道跑到我的频道中了，我们并没有去手动的删除点击的这个推荐频道，但是它没了 !</p></blockquote> <ul><li>因为推荐频道是通过一个计算属性获取的，计算属性中使用了 channels（我的频道）数据</li> <li>计算属性会观测内部依赖数据的变化</li> <li>如果依赖的数据发生改变，则计算属性会重新执行</li> <li>所以只要我的频道中的数据发生变化，那么计算属性就会重新运算获取最新的数据</li></ul> <hr> <h3 id="_6-编辑频道"><a href="#_6-编辑频道" class="header-anchor">#</a> 6. 编辑频道</h3> <h4 id="_6-1-实现思路"><a href="#_6-1-实现思路" class="header-anchor">#</a> 6.1 实现思路</h4> <p>思路：</p> <ul><li>给我的频道中的频道项注册点击事件</li> <li>在事件处理函数中
<ul><li>如果是编辑状态，则执行删除频道操作</li> <li>如果是非编辑状态，则执行切换频道操作</li></ul></li></ul> <h4 id="_6-2-处理编辑状态"><a href="#_6-2-处理编辑状态" class="header-anchor">#</a> 6.2 处理编辑状态</h4> <ol><li>将删除图标处理成插槽自定义按钮，并设置样式</li></ol> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-grid-item</span>
  <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>clear<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>grid-item<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(channel, index) in myChannels<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span>
<span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-icon</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>clear<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-icon</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ active: index === activeIndex }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{ channel.name }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-grid-item</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-less extra-class"><pre class="language-less"><code><span class="token selector">.van-grid-item__icon-wrapper</span> <span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><ol start="2"><li>在 data 中添加数据用来控制编辑状态的显示</li></ol> <ul><li>在 <code>data</code> 中声明 <code>isEdit</code> 控制编辑的状态</li> <li>在组件中使用 <code>isEdit</code> 属性，控制元素的显示</li> <li>给编辑按钮绑定事件，切换编辑的状态</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">{</span>
    isEdit<span class="token operator">:</span> <span class="token boolean">false</span> <span class="token comment">// 控制编辑状态</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-icon</span> <span class="token attr-name">v-show</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>isEdit<span class="token punctuation">&quot;</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>clear<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-icon</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>edit-btn<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mini<span class="token punctuation">&quot;</span></span> <span class="token attr-name">round</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">plain</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>isEdit = !isEdit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>编辑<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-button</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><ol start="3"><li>对文字进行修改 ,如果 <code>isEdit</code> 为 false 则非编辑状态，否则为编辑状态</li></ol> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-button</span>
  <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>edit-btn<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mini<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">round</span>
  <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">plain</span>
  <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>isEdit = !isEdit<span class="token punctuation">&quot;</span></span>
<span class="token punctuation">&gt;</span></span>{{ isEdit ? '完成' : '编辑' }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-button</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><ol start="4"><li>控制不需要删除的频道</li></ol> <ul><li>在 <code>data</code> 中声明数据</li> <li>在 <code>v-icon</code> 中进行判断，是否在不需要删除的频道上添加删除 <code>icon</code></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">{</span>
    fiexdChannels<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token comment">// 不需要编辑、删除的频道</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-icon</span> <span class="token attr-name">v-show</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>isEdit &amp;&amp; !fiexdChannels.includes(channel.id)<span class="token punctuation">&quot;</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>clear<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-icon</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><ol start="5"><li>刷新页面，看是否完成编辑状态的修改</li></ol> <h4 id="_6-3-切换频道-让激活频道高亮"><a href="#_6-3-切换频道-让激活频道高亮" class="header-anchor">#</a> 6.3  切换频道，让激活频道高亮</h4> <ol><li>给我的频道绑定点击事件，同时在 <code>methods</code> 中声明事件处理程序</li></ol> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-grid-item</span>
  <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>clear<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>grid-item<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(channel, index) in myChannels<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>index<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onMyChannelClick(channel, index)<span class="token punctuation">&quot;</span></span>
<span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-icon</span> <span class="token attr-name">v-show</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>isEdit &amp;&amp; !fiexChannels.includes(channel.id)<span class="token punctuation">&quot;</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>icon<span class="token punctuation">&quot;</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>clear<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-icon</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{ active: index === activeIndex }<span class="token punctuation">&quot;</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{ channel.name }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-grid-item</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 切换频道</span>
<span class="token function">onMyChannelClick</span> <span class="token punctuation">(</span><span class="token parameter">channel<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
</code></pre></div><ol start="2"><li><p>在 <code>onMyChannelClick</code> 事件处理中实现高亮效果</p> <ul><li>使用 <code>$.emit</code> 以及 <code>$.on</code> 实现父子关系</li> <li>子组件将数据传递给父组件，实现高亮效果</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 切换频道</span>
<span class="token function">onMyChannelClick</span> <span class="token punctuation">(</span><span class="token parameter">channel<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>isEdit<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 编辑状态，执行删除频道</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    <span class="token comment">// 非编辑状态，指向切换频道</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'update-active'</span><span class="token punctuation">,</span> index<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-vue extra-class"><pre class="language-vue"><code><span class="token comment">&lt;!-- 父组件接收事件 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>channel-edit</span> <span class="token attr-name">:my-channels</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>channels<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:active-index</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>active<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@update-active</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onUpdateActive<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 接收父组件传递数据，实现频道切换</span>
<span class="token function">onUpdateActive</span> <span class="token punctuation">(</span><span class="token parameter">index</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>active <span class="token operator">=</span> index
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>切换频道后让弹框隐藏</p></li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 接收父组件传递数据，实现频道切换</span>
<span class="token function">onUpdateActive</span> <span class="token punctuation">(</span><span class="token parameter">index</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>active <span class="token operator">=</span> index
  <span class="token keyword">this</span><span class="token punctuation">.</span>isChannelEditShow <span class="token operator">=</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span>
</code></pre></div><ol start="4"><li>回到页面，测试代码是否成功</li></ol> <h4 id="_6-4-删除我的频道"><a href="#_6-4-删除我的频道" class="header-anchor">#</a> 6.4 删除我的频道</h4> <blockquote><p>功能需求：在编辑状态下删除频道</p></blockquote> <ol><li>实现我的频道功能</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 切换频道</span>
<span class="token function">onMyChannelClick</span><span class="token punctuation">(</span><span class="token parameter">channel<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>isEdit<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 如果是固定频道，则不删除</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>fiexdChannels<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>channel<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span>
    <span class="token punctuation">}</span>

    <span class="token comment">// 删除频道项</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>myChannels<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>index<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span>

    <span class="token comment">// 如果要删除的激活频道之前的频道，则更新激活的频道项</span>
    <span class="token comment">// 参数1：要删除的元素的开始索引</span>
    <span class="token comment">// 参数2：要删除的个数，如果不指定，则从参数 1 开始一直删除</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>index <span class="token operator">&lt;=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>activeIndex<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// 让激活频道索引 - 1</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'update-active'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>activeIndex <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    <span class="token comment">// 非编辑状态，指向切换频道</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'update-active'</span><span class="token punctuation">,</span> index<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ol start="2"><li>更改 <code>onUpdateActive</code> 方法，接收参数，决定弹框的隐藏和显示</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 切换频道</span>
<span class="token function">onMyChannelClick</span><span class="token punctuation">(</span><span class="token parameter">channel<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>isEdit<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 如果是固定频道，则不删除</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>fiexdChannels<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>channel<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span>
    <span class="token punctuation">}</span>

    <span class="token comment">// 删除频道项</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>myChannels<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>index<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span>

    <span class="token comment">// 如果要删除的激活频道之前的频道，则更新激活的频道项</span>
    <span class="token comment">// 参数1：要删除的元素的开始索引</span>
    <span class="token comment">// 参数2：要删除的个数，如果不指定，则从参数 1 开始一直删除</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>index <span class="token operator">&lt;=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>activeIndex<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// 让激活频道索引 - 1</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'update-active'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>activeIndex <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    <span class="token comment">// 非编辑状态，指向切换频道</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'update-active'</span><span class="token punctuation">,</span> index<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 接收父组件传递数据，实现频道切换</span>
<span class="token function">onUpdateActive</span> <span class="token punctuation">(</span><span class="token parameter">index<span class="token punctuation">,</span> isChannelEditShow <span class="token operator">=</span> <span class="token boolean">true</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>active <span class="token operator">=</span> index
  <span class="token keyword">this</span><span class="token punctuation">.</span>isChannelEditShow <span class="token operator">=</span> isChannelEditShow
<span class="token punctuation">}</span>
</code></pre></div><ol start="3"><li>回到页面，测试代码是否成功</li></ol> <hr> <h3 id="_7-频道数据持久化"><a href="#_7-频道数据持久化" class="header-anchor">#</a> 7. 频道数据持久化</h3> <h4 id="_7-1-业务分析"><a href="#_7-1-业务分析" class="header-anchor">#</a> 7.1 业务分析</h4> <p>频道编辑这个功能，无论用户是否登录用户都可以使用。</p> <p>不登录也能使用</p> <ul><li>数据存储在本地</li> <li>不支持同步功能</li></ul> <p>登录也能使用</p> <ul><li>数据存储在线上后台服务器</li> <li>更换不同的设备可以同步数据</li></ul> <h4 id="_7-2-添加频道"><a href="#_7-2-添加频道" class="header-anchor">#</a> 7.2 添加频道</h4> <ol><li>思路分析：</li></ol> <ul><li><p>如果未登录，则存储到本地</p></li> <li><p>如果已登录，则存储到线上</p> <ul><li>找到数据接口</li> <li>封装请求方法</li> <li>请求调用</li></ul></li></ul> <ol start="2"><li>首先获取用户的登录的封装状态，查看是已登录还是未登录</li></ol> <ul><li>导入 <code>mapState</code> 方法</li> <li>在计算属性 <code>computed</code> 中调用 <code>mapState</code> 方法，传入 <code>user</code> 用户登录的状态</li> <li>在添加频道的方法中根据 <code>user</code> 判断用户登录与否</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> mapState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vuex'</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code>computed<span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token operator">...</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'user'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 添加频道</span>
<span class="token function">onAddChannel</span><span class="token punctuation">(</span><span class="token parameter">channel</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>myChannels<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>channel<span class="token punctuation">)</span>

  <span class="token comment">// 数据持久化处理</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>user<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 已登录，把数据请求接口放到服务器</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    <span class="token comment">// 未登录，把数据存储到本地</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ol start="3"><li>处理未登录模块，导入封装的本地存储模块</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> setItem <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/utils/storage.js'</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 添加频道</span>
<span class="token function">onAddChannel</span><span class="token punctuation">(</span><span class="token parameter">channel</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>myChannels<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>channel<span class="token punctuation">)</span>

  <span class="token comment">// 数据持久化处理</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>user<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 已登录，把数据请求接口放到服务器</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'1'</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    <span class="token comment">// 未登录，把数据存储到本地</span>
    <span class="token function">setItem</span><span class="token punctuation">(</span><span class="token string">'TOUTIAO_CHANNELS'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>myChannels<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ol start="4"><li>处理登录后的逻辑，封装添加频道的请求方法</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 添加用户频道</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">addUserChannel</span> <span class="token operator">=</span> <span class="token parameter">channel</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    method<span class="token operator">:</span> <span class="token string">'PATCH'</span><span class="token punctuation">,</span>
    url<span class="token operator">:</span> <span class="token string">'/app/v1_0/user/channels'</span><span class="token punctuation">,</span>
    data<span class="token operator">:</span> <span class="token punctuation">{</span>
      channels<span class="token operator">:</span> <span class="token punctuation">[</span>channel<span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

</code></pre></div><ol start="5"><li>在编辑频道组件中导入并使用组件</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> getAllChannels<span class="token punctuation">,</span> addUserChannel <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/api/channel.js'</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 添加频道</span>
<span class="token keyword">async</span> <span class="token function">onAddChannel</span><span class="token punctuation">(</span><span class="token parameter">channel</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>myChannels<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>channel<span class="token punctuation">)</span>

  <span class="token comment">// 数据持久化处理</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>user<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 已登录，把数据请求接口放到服务器</span>
    <span class="token keyword">try</span> <span class="token punctuation">{</span>
      <span class="token keyword">await</span> <span class="token function">addUserChannel</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        id<span class="token operator">:</span> channel<span class="token punctuation">.</span>id<span class="token punctuation">,</span> <span class="token comment">// 频道 ID</span>
        seq<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>myChannels<span class="token punctuation">.</span>length <span class="token comment">// 序号</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$toast</span><span class="token punctuation">(</span><span class="token string">'保存失败，请稍后再试'</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    <span class="token comment">// 未登录，把数据存储到本地</span>
    <span class="token function">setItem</span><span class="token punctuation">(</span><span class="token string">'TOUTIAO_CHANNELS'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>myChannels<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ol start="6"><li>分别登录和部登录，查看代码功能是否实现</li></ol> <h4 id="_7-3-删除频道"><a href="#_7-3-删除频道" class="header-anchor">#</a> 7.3 删除频道</h4> <ol><li><p>实现思路：</p> <ul><li><p>如果未登录，则存储到本地</p></li> <li><p>如果已登录，则存储到线上</p> <ul><li>找到数据接口</li> <li>封装请求方法</li> <li>请求调用</li></ul></li></ul></li> <li><p>封装一个删除频道功能的方法 <code>deleteChannel</code>，并在 <code>onMyChannelClick</code> 方法中调用</p></li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 删除频道</span>
<span class="token function">deleteChannel</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 切换频道</span>
<span class="token function">onMyChannelClick</span><span class="token punctuation">(</span><span class="token parameter">channel<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
   <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>isEdit<span class="token punctuation">)</span> <span class="token punctuation">{</span>
     <span class="token comment">// coding……略</span>
       
     <span class="token comment">// 处理持久化操作</span>
     <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">deleteChannel</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
   <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ol start="3"><li>在 <code>deleteChannel</code> 处理未登录时候的逻辑</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 删除频道</span>
<span class="token function">deleteChannel</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>user<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 已登录，则将数据更新到线上</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    <span class="token comment">// 未登录，将数据更新到本地</span>
    <span class="token function">setItem</span><span class="token punctuation">(</span><span class="token string">'TOUTIAO_CHANNELS'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>myChannels<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ol start="4"><li>在 <code>deleteChannel</code> 处理登录时候的逻辑</li></ol> <ul><li>封装删除频道的接口模块</li> <li>在编辑频道模块导入接口模块</li> <li>调用封装的接口模块</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 删除用户频道</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">deleteUserChannel</span> <span class="token operator">=</span> <span class="token parameter">channelId</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    method<span class="token operator">:</span> <span class="token string">'DELETE'</span><span class="token punctuation">,</span>
    url<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/app/v1_0/user/channels/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>channelId<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> deleteUserChannel <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/api/channel.js'</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 删除频道</span>
<span class="token keyword">async</span> <span class="token function">deleteChannel</span><span class="token punctuation">(</span><span class="token parameter">channel</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">try</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>user<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">await</span> <span class="token function">deleteUserChannel</span><span class="token punctuation">(</span>channel<span class="token punctuation">.</span>id<span class="token punctuation">)</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
      <span class="token comment">// 未登录，将数据更新到本地</span>
      <span class="token function">setItem</span><span class="token punctuation">(</span><span class="token string">'TOUTIAO_CHANNELS'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>myChannels<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$toast</span><span class="token punctuation">(</span><span class="token string">'操作失败，请稍后重试'</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ol start="5"><li>分别登录和部登录，查看代码功能是否实现</li></ol> <hr> <h3 id="_8-正确的获取首页频道列表数据"><a href="#_8-正确的获取首页频道列表数据" class="header-anchor">#</a> 8. 正确的获取首页频道列表数据</h3> <h4 id="_8-1-思路分析"><a href="#_8-1-思路分析" class="header-anchor">#</a> 8.1 思路分析</h4> <blockquote><p>提示：获取登录用户的频道列表和获取默认推荐的频道列表是同一个数据接口。后端会根据接口中的 token 来判定返回数据。</p></blockquote> <img src="/heima2020/assets/img/004 - 首页-获取频道列表.712f2b01.png" style="zoom:100%;"> <h4 id="_8-2-功能实现"><a href="#_8-2-功能实现" class="header-anchor">#</a> 8.2  功能实现</h4> <ol><li>在 <code>src\views\home\index.vue</code> 中导入 <code>vuex</code> 中的 <code>mapState</code> 方法， 用于判断用户是否登录</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> mapState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vuex'</span>
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code>computed<span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token operator">...</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'user'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><ol start="2"><li>在 <code>src\views\home\index.vue</code> 中导入本地存储模块中的的 <code>Item</code> 方法， 用于判断用户是否登录</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> getItem <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/utils/storage.js'</span>
</code></pre></div><ol start="3"><li>根据思路实现具体的功能</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 获取频道列表</span>
<span class="token keyword">async</span> <span class="token function">loadChannels</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// try {</span>
  <span class="token comment">//   const { data } = await getUserChannels()</span>
  <span class="token comment">//   this.channels = data.data.channels</span>
  <span class="token comment">// } catch (err) {</span>
  <span class="token comment">//   this.$toast('获取频道数据失败')</span>
  <span class="token comment">// }</span>
  <span class="token keyword">let</span> channels <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>

  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>user<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 已登录，请求获取用户频道列表</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">getUserChannels</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    channels <span class="token operator">=</span> data<span class="token punctuation">.</span>data<span class="token punctuation">.</span>channels
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    <span class="token comment">// 未登录，判断是否有本地的频道列表数据</span>
    <span class="token keyword">const</span> localChannels <span class="token operator">=</span> <span class="token function">getItem</span><span class="token punctuation">(</span><span class="token string">'TOUTIAO_CHANNELS'</span><span class="token punctuation">)</span>
    <span class="token comment">// 如果存在本地的频道列表数据</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>localChannels<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      channels <span class="token operator">=</span> localChannels
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
      <span class="token comment">// 没有，请求获取默认频道列表</span>
      <span class="token keyword">const</span> <span class="token punctuation">{</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">getUserChannels</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
      channels <span class="token operator">=</span> data<span class="token punctuation">.</span>data<span class="token punctuation">.</span>channels
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">this</span><span class="token punctuation">.</span>channels <span class="token operator">=</span> channels
<span class="token punctuation">}</span>
</code></pre></div><ol start="4"><li>分别登录和部登录，查看代码功能是否实现</li></ol></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"><!----></div></div>
    <script src="/heima2020/assets/js/app.e2adc9d2.js" defer></script><script src="/heima2020/assets/js/2.7389c9d3.js" defer></script><script src="/heima2020/assets/js/17.79d3becb.js" defer></script>
  </body>
</html>
